<template>
    <div class="start">
        <Title :msg="msg" />
        <div class="link-open-window" @click="openWinHandler">开机界面文档</div>
        <div class="titles">开机界面</div>
        <div class="img-list">
            <img class="img" src="@/assets/code/screen.png" alt="">
        </div>
        <div class="link-open-window" @click="openmutiWinHandler">多窗口文档</div>
        <div class="titles">开机界面</div>
        <div class="img-list">
            <img class="img" src="@/assets/code/mutiwindow.png" alt="">
        </div>
        <el-button type="primary" @click="prevHandler" class="  prev-btn">返回</el-button>
        <el-button type="primary" @click="nextHandler" class="next-btn">下一页</el-button>
    </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { WebviewWindow } from '@tauri-apps/api/window';


const router = useRouter()
const msg = ref<string>('开机界面和多窗口')
const openWinHandler = () => {
    const window = new WebviewWindow('splash-screen', {
        url: "https://tauri.app/zh-cn/v1/guides/features/splashscreen",
        width: 1200,
        height: 800
    })
    window.once('tauri://created', () => {
        console.log('created');
    })
    window.once('tauri://error', (e) => {
        console.log('error', e);
    })
}
const openmutiWinHandler = () => {
    const window = new WebviewWindow('openmutiWinHandler', {
        url: "https://tauri.app/zh-cn/v1/guides/features/multiwindow",
        width: 1200,
        height: 800
    })
    window.once('tauri://created', () => {
        console.log('created');
    })
    window.once('tauri://error', (e) => {
        console.log('error', e);
    })
}

const nextHandler = () => {
    // router.push({ path: '/window' })
}
const prevHandler = () => {
    router.go(-1)
}

</script>
<style lang='less' scoped>
.start {
    width: 100%;
    height: 100vh;
    background: #fff;
    overflow: hidden;

    .next-btn {
        position: fixed;
        bottom: 20px;
        right: 20px;
    }

    .prev-btn {
        position: fixed;
        top: 20px;
        left: 20px;
    }

    .link-open-window {
        margin-left: 5%;
        font-size: 20px;
        font-weight: 600;
        color: #15bb09;
        cursor: pointer;
        text-decoration: underline;
    }

    .titles {
        width: 90%;
        font-size: 24px;
        margin: 20px auto;
        font-size: 18px;
        font-weight: 500;
    }

    .img-list {
        font-size: 24px;
        margin: 20px auto;
        display: flex;
        width: 90%;


        .img {
            width: 600px;
            margin-left: 10px;
        }
    }
}
</style>